class Obp{

    id = ""
    constructor(){
        
        let searchObj = location.search;
        this.id=searchObj.split('=')[1];
        this.getData();
    }
    async getData(){
        let {data,status}=await axios.get('http://localhost:8888/goods/item/'+this.id);
        if(status==200&&data.code==1){
            let str=data.info;
            console.log(str);
            let html=`
            <div id="zoom">
            <div id="fdj">
                <div class="small">
                    <img src="${str.img_big_logo}" alt="" id="a1">
                    <div class="mask"></div>
                </div>
                <div class="big">
                    <img class="big-img" src="${str.img_big_logo}" alt="" id="a2">
                </div>
            </div>
            <div id="title" data-goodsd="id">
                <h2 class="h2">${str.title}</h2>
                <div class="prace">
                    <div class="a1">
                        <a class="b1">京东价:</a>
                        <h1 class="b2">¥${str.price}</h1>
                        <a class="b11">降价通知</a>
                        <a class="b3">累计评价</a>
                        <a class="b4">31</a>
                    </div>
                    <div class="a2">
                        <div class="c1">促销</div>
                        <div class="c2">多买优惠</div>
                        <div class="c3">满一件,&nbsp;总价打95折&nbsp;;满两件&nbsp;,总价打9折&nbsp;;满三件&nbsp;总价打8.5折</div>
                    </div>
                    <div class="a3">详情>></div>
                </div>
                <div class='hb'>
                <button class="a1">S</button>
                <button class="a2">M</button>
                <button class="a3">L</button>
                <button class="a4">XL</button>
                </div>
                <div class="mn">
                    <button id="fghj">加入购物车</button>
                </div>
            </div>
            <div class="nav-a">
                <img src="${str.Pages}" alt="" class="a1">
                <img src="${str.Pages1}" alt="" class="a2">
                <img src="${str.Pages2}" alt="" class="a3">
                <img src="${str.Pages3}" alt="" class="a4">
                <img src="${str.Pages4}" alt="" class="a5">
                <img src="${str.Pages5}" alt="" class="a6">
                <img src="${str.Pages6}" alt="" class="a6">
            </div>
        </div>
            `
            document.querySelector('#Pages').innerHTML=html;
            // data.info.forEach(ele=>{
            //     console.log(ele);
            // })
            // console.log(str);
            // this.$('#fdj #a1').src=str.img_big_logo;
            // this.$('#fdj #a2').src=str.img_big_logo;
            // this.$('#title h2').innerHTML=str.title;
            // this.$('#title .b2').innerHTML=str.price;
            // 
            this.$("#fghj").addEventListener("click",this.nowBuy.bind(this,this.id));

            let box=document.querySelector('#fdj')
            console.log(box);
            let small=document.querySelector('.small');
            console.log(small);
            let mask=document.querySelector('.mask')
            let big=document.querySelector('.big')
            let bigImg=document.querySelector('.big-img')
            
            //2-1
            small.onmouseover=function(){
                mask.style.display='block';
                big.style.display='block';
            }
            small.onmouseout=function(){
                mask.style.display='none';
                big.style.display='none';
            }
            //3-1
            let boxL = box.offsetLeft,
            boxT = box.offsetTop;
            small.onmousemove=function(eve){
                let mx=eve.pageX-boxL-mask.offsetWidth/2;
                let my=eve.pageY-boxT-mask.offsetHeight/2;
                if(mx<0){
                    mx=0
                }
                if(mx>small.offsetWidth-mask.offsetWidth){
                    mx=small.offsetWidth-mask.offsetWidth
                }
                if(my<0){
                    my=0
                }
                if(my>small.offsetHeight-mask.offsetHeight)my=small.offsetHeight-mask.offsetHeight
                mask.style.left=mx+'px'
                mask.style.top=my+'px';
            //比例
                let bigImgWidth=small.offsetWidth/mask.offsetWidth*big.offsetWidth;
                bigImg.style.width=bigImgWidth+'px';
                let bigImgX=-mx*(bigImg.offsetWidth/small.offsetWidth)
                let bigImgY=-my*(bigImg.offsetHeight/small.offsetHeight)
                bigImg.style.top=bigImgY+'px';
                bigImg.style.left=bigImgX+'px';
            }
        }
    }
    nowBuy(goodsId){
        let token=localStorage.getItem('token');
        if(!token)location.href='./login.html?./index.html';
        //用户IDtoken中用户id
        let userId=localStorage.getItem('user_id');
        let param = `id=${userId}&goodsId=${goodsId}`;
        console.log(param);
        //发送请求
        //请求头
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.defaults.headers.common['Authorization'] = token;
        axios.post('http://localhost:8888/cart/add', param).then(res=>{
            let { status, data } = res;
            if (status != 200) return;
            if (data.code == 0) location.href = './login.html?index.html';
            layer.confirm('老铁买不买?',{
                btn: ['咬咬牙!', '买!买大份的!'] 
                }, function (){
                    location.href = './cart.html';
                });
        })
    }
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }
}
new Obp;

